<template>
	<view class='regist'>
		<view class='content'>
			<view class='titles'>
				<view class='titleOne'>注册发现更多精彩</view>
				<view class='titleTwo'>欢迎登录一站式上门洗护平台</view>
			</view>
			<view class='forms'>
				<view class='formLine dFlex jBetween_aCenter'>
					<view class='lineTitle'>手机号</view>
					<view class='lineVal dFlex jBetween_aCenter'>
						<view class='iptBox'>
							<input type="text" v-model="regist.tel" placeholder="请输入手机号">
						</view>
					</view>
				</view>
				<view class='formLine dFlex jBetween_aCenter'>
					<view class='lineTitle'>验证码</view>
					<view class='lineVal dFlex jBetween_aCenter'>
						<view class='iptBox'>
							<input type="text" v-model="regist.code" placeholder="请输入验证码">
						</view>
						<text class='code' @tap='getCode'>{{codeFlag?"获取验证码":time+'s后重新发送'}}</text>
					</view>
				</view>
				<view class='formLine dFlex jBetween_aCenter'>
					<view class='lineTitle'>设置密码</view>
					<view class='lineVal dFlex jBetween_aCenter'>
						<view class='iptBox'>
							<input type="password" v-model="regist.password" placeholder="请输入密码">
						</view>
					</view>
				</view>
				<!-- <view class='formLine dFlex jBetween_aCenter'>
					<view class='lineTitle'>邀请码</view>
					<view class='lineVal dFlex jBetween_aCenter'>
						<view class='iptBox'>
							<input type="text" v-model="regist.spreadId" placeholder="请输入邀请码(选填)">
						</view>
					</view>
				</view> -->
			</view>
			<view class='redBtn' @tap='registUser'>注册</view>
			<view class='xieyi dFlex jCenter_aCenter'>
				<view class='xieyiStatusIcon imgPublic' @tap='changeStatus'>
					<image v-if="!flag" src="https://wx.gdxixiashi.com/public/images/car/weixuan@2x.png" mode="widthFix"></image>
					<image v-if="flag" src="https://wx.gdxixiashi.com/public/images/car/yixuan@2x.png" mode="widthFix"></image>
				</view>
				<view>已阅读并同意<text @tap="openPrivacyContract(1)">用户协议</text>和<text @tap="openPrivacyContract(2)">隐私政策</text></view>
			</view>
		</view>
	</view>
</template>

<script>
	let timer = null;
	export default {
		data() {
			return {
				regist:{
					tel:"",
					code:'',
					//spreadId:'',
					password:"",
				},
				flag:false,
				codeFlag:true,
				time:60,
			};
		},
		onLoad() {
			
		},
		onShow(){
			
		},
		methods:{
			// 注册
			registUser(){
				for(let i in this.regist){
					if(!this.regist[i]){
						uni.showToast({
							title:"注册信息填写不完整",
							icon:"none"
						})
						return;
					}
				}
				if(!this.flag){
					uni.showToast({
						title:"请同意相关用户协议和隐私政策",
						icon:"none"
					})
					return;
				}
				this.tool.getData("Regist/regist",this.regist).then(res=>{
					console.log(res);
					if(res){
						uni.navigateBack({
							delta:1
						})
					}
				}).catch(err=>{
					console.log(err);
				})
			},
			// 修改状态
			changeStatus(){
				this.flag = !this.flag;
			},
			// 获取验证码
			getCode(){
				if(!this.regist.tel){
					uni.showToast({
						title:"请输入手机号码",
						icon:"none"
					})
					return;
				}
				if (this.regist.tel.length != 11) {
					uni.showToast({
						title:"手机号码格式不正确",
						icon:"none"
					})
					return;
				}
				if(this.codeFlag){
					this.tool.getData("Regist/sendSmsMessage",{
						tel:this.regist.tel,
						token:'aadac7f36499f233352f79f599ee3606'
					}).then(res=>{
						console.log(res);
						if(res){
							this.codeFlag = false;
							let time = 60;
							timer = setInterval(()=>{
								time -- ;
								if(time>0){
									this.time = time;
								}else{
									this.time = 60;
									this.codeFlag = true;
									clearInterval(timer);
								}
							},1000)
						}
					}).catch(err=>{
						console.log(err);
					})
				}else{
					uni.showToast({
						title:"请不要频繁操作",
						icon:"none"
					})
				}
			},
			// 打开隐私协议
			openPrivacyContract(status) {
				uni.navigateTo({
					url:'./xieyi?status='+status,
				})
			},
		}
	}
</script>

<style lang="scss">
	.regist{
		width: 100%;
		overflow: auto;
		.content{
			width: 80%;
			margin: 15% auto 0;
			.redBtn{
				width: 100%;
				background:#4886FF;
				padding:10px 0;
				color:white;
				text-align:center;
				border-radius: 5px;
			}
			.xieyi{
				width: 100%;
				margin-top: 28upx;
				color: #999999;
				font-size: 12px;
				.xieyiStatusIcon{
					width: 30upx;
					height:30upx;
					margin-right: 10upx;
				}
				text{
					color: #4886FF;
				}
			}
			.regist{
				font-size:12px;
				margin-top: 30upx;
				text-align: center;
			}
			.forms{
				width: 100%;
				margin-bottom: 60upx;
				.formLine{
					width: 100%;
					margin-bottom: 40upx;
					background: #e6e6e6;
					padding:22upx 26upx;
					box-sizing: border-box; 
					border-radius: 8upx;
					.lineTitle{
						width: 25%;
						margin-right: 15upx; 
					}
					.lineVal{
						flex: 1;
						.iptBox{
							flex: 1;
							margin-right:20upx;
						}
						.code{
							width: auto;
							color: #4886FF;
						}
					} 
				}
			}
			.titles{
				width: 100%;
				margin-bottom:100upx;
				.titleOne{
					font-size: 24px;
				}
				.titleTwo{
					color: #999999;
					font-size: 15px;
					margin-top: 20upx;
				}
			}
		}
	}
	page{
		background:#f6f6f6;
	}
</style>